<template>
    <div><br>
        <table border="1" cellspacing="0" width=600 v-if="list.length > 0">
            <thead align="center">
                <tr>
                    <th colspan="4">学生信息</th>
                </tr>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list" :key="item.id" align="center">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td><button @click="del(index)">删除</button></td>

                </tr>
            </tbody>
            <tfoot>
                <tr v-if="list.length > 0">
                    <td colspan="4"><button @click="delall">删除全部</button></td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
import { busvm } from "../App.vue"
export default {
    name: 'AfternoonTab',

    data() {
        return {
            name: "tab",
            list: []
        };
    },

    mounted() {
        
        busvm.$on("allpeople", (res) => {

            this.list.push(res)
        })
       busvm.$on("search",(res)=>{
           
            this.list = res
       })

    },

    methods: {
        del(index) {
            this.list.splice(index, 1)
            
        },
        delall() {
            this.list = []
            busvm.$emit("tablist",this.list)
            
        }
    },
    
};
</script>

<style lang="scss" scoped>

</style>